<template>
    <div class="cmt-container">
        <h3>评论子组件</h3>
        <hr><!--分割线-->
        <textarea placeholder="请输入要评论的内容(最多120个字)" maxlength="120"></textarea>
        <mt-button type="primary" size="large">发表评论</mt-button>
        <!--评论的内容-->
        <div class="cmt-list">
            <div class="cmt-item">
                <div class="cmt-title">
                    &nbsp;&nbsp;第一楼&nbsp;&nbsp;用户:只有光头才能变强~<br>
                    &nbsp;&nbsp;发表时间:2019/12/29 11:11:20
                </div>
                <div class="cmt-body">
                    锄禾日当午 复方
                </div>
            </div>
        </div>
        <div class="cmt-list">
            <div class="cmt-item">
                <div class="cmt-title">
                    &nbsp;&nbsp;第二楼&nbsp;&nbsp;用户:只有光头才能变强~<br>
                    &nbsp;&nbsp;发表时间:2019/12/29 11:11:20
                </div>
                <div class="cmt-body">
                    锄禾日当午 复方
                </div>
            </div>
        </div>

        <mt-button type="danger" size="large" plain>加载更多</mt-button>
    </div>
</template>

<script>
    import { Toast } from "mint-ui"
    export default {
        data(){
            return {
                comments:[]//所以的评论数据
            }
        },
        created(){
            this.getComments();
        },
        methods:{
            getComments(){
                this.$http.get('/src/commet.json').then(result=>{
                    if(result.body.status =200){//如果返回体状态是200的话
                        console.log(result)
                    }else{
                        Toast("获取评论失败");
                    }
                })//发送请求获取数据
            }
        },
        props:["id"]
    }
</script>

<style lang="scss" scoped>
    .cmt-container{
        h3{
            font-size: 18px;
        }
        textarea{
            font-size: 14px;
            height: 85px;
        }
        .cmt-list{
            margin-top: 2px;
            margin-bottom: 2px;
            border-radius: 4px;
            border: 1px solid #cccccc;
            .cmt-item{
                font-size: 13px;
                .cmt-title{
                    line-height: 30px;
                }
                .cmt-body{
                    line-height: 35px;
                    margin-left: 6px;
                }
            }
        }
    }
</style>